<template>
    <div style="color: #fff;">
        <!-- 顶部栏 -->
        <div style="height: .98rem;">
            <div class="settintopgbox">
                <svg @click="backMine" t="1674987056061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2285"><path stroke="#ffffff" stroke-width="25" d="M362.666667 896c-4.266667 0-8.533333 0-12.8-4.266667-8.533333-8.533333-8.533333-21.333333-4.266667-29.866666L631.466667 512 345.6 162.133333c-8.533333-8.533333-4.266667-21.333333 4.266667-29.866666 8.533333-8.533333 21.333333-4.266667 29.866666 4.266666l298.666667 362.666667c8.533333 8.533333 8.533333 21.333333 0 25.6l-298.666667 362.666667c-4.266667 4.266667-12.8 8.533333-17.066666 8.533333z" fill="#ffffff" p-id="2286"></path></svg>
                <span>账户设置</span>
                <div style="width: .5rem"></div>
            </div>
        </div>

        <!-- Setting Item -->
        <div class="settingitembox">
            <div class="settingitem">
                <div class="itembox">
                    <div class="item header">
                        <span class="name">头像</span>
                        <img v-if="!isLogin" src="@/assets/images/头像.png" alt="">
                        <img v-if="isLogin" :src="require('../../../server/public/images/user/avata/' + userinfo[0].avata)" alt="" >
                        <!-- <span v-for="(o,i) in usermsg" :key="i"  style="color: #fff;">o.name</span> -->
                    </div>
                </div>
                <div class="itembox">
                    <div class="item">
                        <span class="name">个人资料</span>
                        <div class="status">
                            <span>待完善</span>
                            <svg t="1674987056061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2285"><path stroke="#c1c1c1" stroke-width="25" d="M362.666667 896c-4.266667 0-8.533333 0-12.8-4.266667-8.533333-8.533333-8.533333-21.333333-4.266667-29.866666L631.466667 512 345.6 162.133333c-8.533333-8.533333-4.266667-21.333333 4.266667-29.866666 8.533333-8.533333 21.333333-4.266667 29.866666 4.266666l298.666667 362.666667c8.533333 8.533333 8.533333 21.333333 0 25.6l-298.666667 362.666667c-4.266667 4.266667-12.8 8.533333-17.066666 8.533333z" fill="#c1c1c1" p-id="2286"></path></svg>
                        </div>
                    </div>
                </div>
                <div class="itembox">
                    <div class="item">
                        <span class="name" >实名认证</span>
                        <div class="status">
                            <span style="color: #f09742;">去认证</span>
                            <svg t="1674987056061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2285"><path stroke="#c1c1c1" stroke-width="25" d="M362.666667 896c-4.266667 0-8.533333 0-12.8-4.266667-8.533333-8.533333-8.533333-21.333333-4.266667-29.866666L631.466667 512 345.6 162.133333c-8.533333-8.533333-4.266667-21.333333 4.266667-29.866666 8.533333-8.533333 21.333333-4.266667 29.866666 4.266666l298.666667 362.666667c8.533333 8.533333 8.533333 21.333333 0 25.6l-298.666667 362.666667c-4.266667 4.266667-12.8 8.533333-17.066666 8.533333z" fill="#c1c1c1" p-id="2286"></path></svg>
                        </div>
                    </div>
                </div>
            </div>
            <div class="settingitem">
                <div class="itembox">
                    <div class="item">
                        <span class="name">账号与安全</span>
                        <div class="status">
                            <span>未设置</span>
                            <svg t="1674987056061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2285"><path stroke="#c1c1c1" stroke-width="25" d="M362.666667 896c-4.266667 0-8.533333 0-12.8-4.266667-8.533333-8.533333-8.533333-21.333333-4.266667-29.866666L631.466667 512 345.6 162.133333c-8.533333-8.533333-4.266667-21.333333 4.266667-29.866666 8.533333-8.533333 21.333333-4.266667 29.866666 4.266666l298.666667 362.666667c8.533333 8.533333 8.533333 21.333333 0 25.6l-298.666667 362.666667c-4.266667 4.266667-12.8 8.533333-17.066666 8.533333z" fill="#c1c1c1" p-id="2286"></path></svg>
                        </div>
                    </div>
                </div>
                <div class="itembox">
                    <div class="item">
                        <span class="name">消息通知</span>
                        <div class="status">
                            <span>去修改</span>
                            <svg t="1674987056061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2285"><path stroke="#c1c1c1" stroke-width="25" d="M362.666667 896c-4.266667 0-8.533333 0-12.8-4.266667-8.533333-8.533333-8.533333-21.333333-4.266667-29.866666L631.466667 512 345.6 162.133333c-8.533333-8.533333-4.266667-21.333333 4.266667-29.866666 8.533333-8.533333 21.333333-4.266667 29.866666 4.266666l298.666667 362.666667c8.533333 8.533333 8.533333 21.333333 0 25.6l-298.666667 362.666667c-4.266667 4.266667-12.8 8.533333-17.066666 8.533333z" fill="#c1c1c1" p-id="2286"></path></svg>
                        </div>
                    </div>
                </div>
                <div class="itembox">
                    <div class="item">
                        <span class="name">夜间模式</span>
                        <div class="status">
                            <span></span>
                            <svg t="1674987056061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2285"><path stroke="#c1c1c1" stroke-width="25" d="M362.666667 896c-4.266667 0-8.533333 0-12.8-4.266667-8.533333-8.533333-8.533333-21.333333-4.266667-29.866666L631.466667 512 345.6 162.133333c-8.533333-8.533333-4.266667-21.333333 4.266667-29.866666 8.533333-8.533333 21.333333-4.266667 29.866666 4.266666l298.666667 362.666667c8.533333 8.533333 8.533333 21.333333 0 25.6l-298.666667 362.666667c-4.266667 4.266667-12.8 8.533333-17.066666 8.533333z" fill="#c1c1c1" p-id="2286"></path></svg>
                        </div>
                    </div>
                </div>
                <div class="itembox">
                    <div class="item">
                        <span class="name">清除存储空间</span>
                        <div class="status">
                            <span>13.4MB</span>
                            <svg t="1674987056061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2285"><path stroke="#c1c1c1" stroke-width="25" d="M362.666667 896c-4.266667 0-8.533333 0-12.8-4.266667-8.533333-8.533333-8.533333-21.333333-4.266667-29.866666L631.466667 512 345.6 162.133333c-8.533333-8.533333-4.266667-21.333333 4.266667-29.866666 8.533333-8.533333 21.333333-4.266667 29.866666 4.266666l298.666667 362.666667c8.533333 8.533333 8.533333 21.333333 0 25.6l-298.666667 362.666667c-4.266667 4.266667-12.8 8.533333-17.066666 8.533333z" fill="#c1c1c1" p-id="2286"></path></svg>
                        </div>
                    </div>
                </div>
            </div>
            <div class="settingitem">
                <div class="itembox">
                    <div class="item">
                        <span class="name">注销账号</span>
                        <div class="status">
                            <span></span>
                            <svg t="1674987056061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2285"><path stroke="#c1c1c1" stroke-width="25" d="M362.666667 896c-4.266667 0-8.533333 0-12.8-4.266667-8.533333-8.533333-8.533333-21.333333-4.266667-29.866666L631.466667 512 345.6 162.133333c-8.533333-8.533333-4.266667-21.333333 4.266667-29.866666 8.533333-8.533333 21.333333-4.266667 29.866666 4.266666l298.666667 362.666667c8.533333 8.533333 8.533333 21.333333 0 25.6l-298.666667 362.666667c-4.266667 4.266667-12.8 8.533333-17.066666 8.533333z" fill="#c1c1c1" p-id="2286"></path></svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 退出登录 -->
        <button v-if="isLogin" class="logout" @click="logout()">退出登录</button>
        <button v-else class="logout" @click="$router.push('/user/login')">去登录</button>
    </div>
</template>

<script>
import { logout } from '@/api/user/logout'
import { mapState } from 'vuex';

export default {
    name: 'Vue2Setting',

    data() {
        return {
            usermsg: [],
        };
    },

    computed: {
        // 导入vuex中的登录状态
        ...mapState(['isLogin','userinfo'])
    },

    methods: {

    },
    created() {
    },
    mounted() {
        // console.log(this.userinfo)        
    },

    methods: {

        backMine(){
            this.$router.replace('/mine')
        },

         // 退出登录请求
        logout(){
            logout().then((res)=>{
                if (res.data.success) {
                    // 退出登录成功，清除本地登录状态、本地用户信息，调用mutations方法初始化vuex,并跳转到登录页面
                    localStorage.clear()
                    this.$store.commit('setIslogin',false)
                    this.$store.commit('setUserid','')
                    this.$store.commit('setUserInfo', [])
                    this.$store.commit('setToken','')
                    // console.log(localStorage)
                    // console.log(localStorage)
                    this.$router.push('/user/login')
                } else {
                    // 退出登录失败，处理错误信息
                    console.error(res.data.message)
                }
            })
        }
    },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/setting/setting.scss'
</style>